<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />

		<link rel="stylesheet" href="../css/reset.css" />

		<style>
			.mui-content {
				background: #ffffff;
			}
			
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 400px;
			}
			
			.menu-wrap {
				display: flex;
				padding: 0 0 10px 0;
			}
			
			.menu-wrap li {
				flex: 1;
				text-align: center;
			}
			
			.menu-wrap li h2 {
				font-size: 13px;
				margin: 8px auto 0 auto;
			}
			
			.menu-wrap li img {
				width: 28px;
			}
			
			.menu-wrap .mw-on {
				color: #5fbda3;
			}
			
			.search-bar input {
				padding-left: 40px;
				width: 80%;
				display: inline-block;
				margin-bottom: 0;
			}
			
			.search-bar button {
				width: 16%;
				display: inline-block;
				background: none;
				color: #5fbda3;
				border: none;
				height: 40px;
				font-size: 18px;
			}
			
			.search-bar .mui-icon-search {
				position: absolute;
				left: 25px;
				top: 18px;
			}
			
			button:active {
				background: none;
			}
			
			button:focus {
				background: none;
			}
			
			button:visited {
				background: none;
			}
			
			.search-bar {
				background: #faf8f9;
				padding: 10px 0px 10px 20px;
				box-sizing: border-box;
				position: relative;
			}
			
			.tab-tit {
				display: flex;
				padding: 10px 0;
				border-bottom: solid 1px #dcdcdc;
			}
			
			.tab-tit li {
				flex: 1;
				text-align: center;
				border-right: solid 1px #dcdcdc;
				font-size: 16px;
			}
			
			.tab-tit li:nth-child(3n+0) {
				border-right: none;
			}
			
			.tab-tit li .mui-icon {
				font-size: 18px;
			}
			
			.product-list {
				overflow: hidden;
			}
			
			.product-list div {
				float: left;
			}
			
			.product-name {
				width: 25%;
			}
			
			.product-money {
				width: 25%;
			}
			
			.product-other {
				width: 25%;
				text-align: center;
			}
			
			.product-from {
				width: 25%;
			}
			
			.page-style.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #5fbda3;
				border-bottom: 2px solid #5fbda3;
				font-size: 16px
			}
			
			.page-style.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				font-size: 16px
			}
/*			.position-box{ position: fixed; top: 0;}
			.position-list{ position: fixed; top: 162px; width: 100%;}*/
		</style>
	</head>
	</head>

	<body>

		<div class="mui-content" id="price">
			<div class="position-box">
				<div style="padding: 10px 10px;">
					<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary page-style">
						<a class="mui-control-item mui-active" href="#item1">蔬菜价格</a>
						<a class="mui-control-item" href="#item2">中草药价格</a>
					</div>
				</div>
			
			<!--	<div class="search-bar  ">
					<input type="text" class="mui-input-clear " placeholder="请输入查询的关键字" />
					<button type="button" class="mui-btn " onclick="return false;">搜索</button>
					<span class="mui-icon mui-icon-search"></span>
				</div>-->
				<ul class="tab-tit">
					<li>品种 <span class="mui-icon mui-icon-arrowdown"></span></li>
					<li>最新价格 <span class="mui-icon mui-icon-arrowdown"></span></li>
					<li>日期 <span class="mui-icon mui-icon-arrowdown"></span></li>
				</ul>
			</div>
			
			<div class="position-list">
				<div id="item1" class="mui-control-content mui-active">
					<!--	<div v-for="item in shucaiList.data">
					{{item.name}}
				</div>-->
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li  class="mui-table-view-cell product-list sc" v-for="item in shucaiList">
									<div class="product-name">{{item.name}}</div>
									<div class="product-money">{{item.price}}</div>
									<div class="product-other">--</div>
									<div class="product-from">{{item.pub_date|timeformat}}</div>
								</li>

							</ul>
							<div class="bottom-line" style="text-align: center;"></div>
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell product-list cy" v-for="item in caoyaoList">
									<div class="product-name">{{item.name}}</div>
									<div class="product-money">{{item.price}}</div>
									<div class="product-other">--</div>
									<div class="product-from">{{item.release_date}}</div>
								</li>

							</ul>
								<div class="bottom-line2" style="text-align: center;"></div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<script src="http://api.datashang.com/lib/encrty.js"></script>
			<script src="../js/resource/jquery-1.7.2.min.js"></script>
		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
	
		<script src="../js/price.js"></script>
		<script>
			var _price = price
		  $('#scroll ul').on('touchmove',function(){
		  	
        	//判断最后一个元素是否在底部之上
       	 if( $('.sc').eq($('.sc').length-1).offset().top-$(window).scrollTop() < $(window).height() ){
            	
            	if(_price.total>0){
            		$('.bottom-line').css('display','block').text('数据加载中...');
            		_price.getShuCaiPrice()
            	}else{
            		$('.bottom-line').css('display','block').text('加载完毕');
            	}
            	
       
        	}
    	 });
    	 
    	 	  $('#scroll2 ul').on('touchmove',function(){
		 
        	//判断最后一个元素是否在底部之上
       	 if( $('.cy').eq($('.cy').length-1).offset().top-$(window).scrollTop() < $(window).height() ){
      
            	if(_price.total2>0){
            		$('.bottom-line2').css('display','block').text('数据加载中...');
            		_price.getCaoYaoPrice()
            	}else{
            		$('.bottom-line2').css('display','block').text('加载完毕');
            	}
            	
       
        	}
    	 });
    	 
    	 
    	 
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
					$('#scroll2').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
		</script>
	</body>

</html>